<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <!-- <p>count:{{count}}</p> -->
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#test",
      data: {
        count:1
      },
      //初始化之前
      beforeCreate(){
        console.log('beforeCreate',this);
        console.log(this.count);
      },
      //初始化之后
      created(){
        console.log('created',this);
        console.log(this.count);
        this.test()
      },
      //挂载之前执行
      beforeMount(){
        console.log('beforeMount');
      },
      //渲染页面
      render(cteateElement){
        console.log('render');
        return cteateElement('p',{},this.count)
      },
      //挂载完成之后执行
      mounted(){
        console.log('mounted');
        setInterval(()=>{
            this.count++
        },1000)

        this.intervalId = setTimeout(()=>{
            vm.$destroy()
        },3000)
      },
      //render更新之前执行
      beforeUpdate(){
        console.log('beforeUpdate()');
      },
      //render更新之后执行
      updated(){
        console.log('updated()');
      },
      //销毁之前
      beforeDestroy(){
        console.log('beforeDestroy');
        clearInterval(this.intervalId)
      },
      //销毁之后
      destroyed(){
        console.log('destroyed');
      },
      methods:{
        test(){
            console.log('test()');
        }
      }
    })
  </script>
</body>
</html>